import {designPage, fixInputCursor, reactive} from "plain-design-composition";
import React from "react";
import './ManagerLogin.less'
import illustration from '../assets/Recycling_Monochromatic.svg'
import '../assets/iconfont/iconfont.css'
import {LoginService} from "@/login/LoginService";
import {$$message, PlLoading} from 'plain-design'
import {handleKeyboard, KEY} from "plain-design/src/packages/keyboard";

export const NativeInput = fixInputCursor<React.FC<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>>('input' as any)

export const ManagerLogin = designPage(() => {

    const state = reactive({
        /*登录或者注册*/
        // isLogin: false,
        /*表单绑定对象*/
        formData: {
            username: '',
            password: '',
        },
        /*加载状态标记*/
        loadingFlag: false,
        /*错误信息*/
        errorMessage: '',
    })

    const methods = {
        submit: async () => {
            if (state.loadingFlag) {return }

            state.errorMessage = ''
            const {username, password} = state.formData
            if (!username) {return state.errorMessage = '请输入用户名！'}
            if (!password) {return state.errorMessage = '请输入密码！'}

            state.loadingFlag = true
            await LoginService.loginRequest({
                url: '/login',
                loginData: {
                    username: state.formData.username.trim(),
                    password: state.formData.password.trim(),
                },
                onSuccess: (dto, resp) => {
                    LoginService.login.resolve({dto, resp})
                    setTimeout(() => state.loadingFlag = false, 5000)
                },
                onError: (e) => {
                    state.loadingFlag = false
                    if (typeof e === "string") {
                        state.errorMessage = e
                    } else {
                        state.errorMessage = '登录失败，无法连接服务器！'
                    }
                    setTimeout(() => state.loadingFlag = false, 5000)
                },
            })
        }
    }

    const handler = {
        onSubmit: methods.submit,
        onKeydown: handleKeyboard({[KEY.enter]: methods.submit,})
    }

    return () => (
        <div className="manager-login">
            <div className="manager-login-bg">
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => <div key={i}/>)}
            </div>
            <div className="manager-login-banner"/>
            <div className="manager-login-foot">
                <div>
                    Copyright © 2020-2021 PLAIN DESIGN all rights reserved.
                </div>
                <div>
                    Powered By Martsforever
                </div>
            </div>

            <div className="manager-login-container">
                <div className="manager-login-container-left">
                    <img src={illustration}/>
                </div>
                <div className="manager-login-container-right">
                    <p className="manager-login-title">XXX模板系统</p>
                    <div className="manager-login-item">
                        <div className="manager-login-item-inner">
                            <div className="manager-login-item-icon">
                                <i className={'pp-font pp-user'}/>
                            </div>
                            <NativeInput type="text" placeholder={'请输入用户名'} v-change={state.formData.username} onKeyDown={handler.onKeydown}/>
                        </div>
                    </div>
                    <div className="manager-login-item">
                        <div className="manager-login-item-inner">
                            <div className="manager-login-item-icon">
                                <i className={'pp-font pp-key'}/>
                            </div>
                            <NativeInput type="password" placeholder={'请输入密码'} v-change={state.formData.password} onKeyDown={handler.onKeydown}/>
                        </div>
                    </div>
                    <div className="manager-login-item manager-login-submit">
                        {!!state.errorMessage && <div className="manager-login-error">
                            <i className="pp-font pp-warning"/>
                            <span>{state.errorMessage}</span>
                        </div>}
                        <button onClick={handler.onSubmit}>
                            {state.loadingFlag && <PlLoading type={'gamma'}/>}
                            <span style={{marginLeft: '1em'}}>登录</span>
                        </button>
                    </div>
                    <div className="manager-login-item manager-login-link">
                        <p onClick={() => $$message.primary('待完成!')}>立即注册</p>
                        <p>|</p>
                        <p onClick={() => $$message.primary('待完成!')}>忘记密码</p>
                    </div>
                </div>
            </div>
        </div>
    )
})
